<template>
  <div class="box">
    <div :id="id" :style="{height:height,width:width} " />
  </div>

</template>
<script>
import echarts from 'echarts'
require('echarts/theme/dark')
import resize from '@/components/Charts/mixins/resize'
import { fetchEquipmentInfo } from '@/api/equipment-card'
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    equipmentNumber: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '320px'
    }
  },
  data() {
    return {
      listQuery: {
        equipmentNumber: this.equipmentNumber
      },
      equipmentName: '',
      uploadFrequency: ''
    }
  },
  watch: {
    equipmentNumber() {
      this.listQuery.equipmentNumber = this.equipmentNumber
      this.update()
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.timer = setInterval(this.update, 1000 * 60 * 15)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    update() {
      fetchEquipmentInfo(this.listQuery.equipmentNumber).then((res) => {
        this.equipmentName = res.data.equipmentName
        this.uploadFrequency = res.data.uploadFrequency
        setTimeout(() => {
        }, 1.5 * 1000)
        this.chart.setOption({
          series: [
            {
              type: 'gauge',
              center: ['50%', '65%'],
              title: {
                show: true,
                fontSize: 18,
                color: 'rgba(23, 221, 39, 1)',
                offsetCenter: ['0', '-150%']
              },
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 1,
              splitNumber: 8,
              axisLine: {
                lineStyle: {
                  width: 6,
                  color: [
                    [0.25, '#FF6E76'],
                    [0.5, '#FDDD60'],
                    [0.75, '#58D9F9'],
                    [1, '#7CFFB2']
                  ]
                }
              },
              pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '80%',
                width: 15,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                length: 12,
                lineStyle: {
                  color: 'auto',
                  width: 2
                }
              },
              splitLine: {
                length: 20,
                lineStyle: {
                  color: 'auto',
                  width: 5
                }
              },
              axisLabel: {
                color: 'auto',
                fontSize: 20,
                distance: -60,
                formatter: function(value) {
                  if (value === 0.875) {
                    return '测试'
                  } else if (value === 0.625) {
                    return '测试'
                  } else if (value === 0.375) {
                    return '测试'
                  } else if (value === 0.125) {
                    return '测试'
                  }
                  return ''
                }
              },
              detail: {
                fontSize: 35,
                offsetCenter: ['0', '60%'],
                valueAnimation: true,
                formatter: function(value) {
                  return Math.round(value) + '%'
                },
                color: 'auto'
              },
              data: [
                {
                  name: this.equipmentName + '--信号强度',
                  value: this.uploadFrequency
                }
              ]
            }
          ]
        })
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption(
        {
          type: 'gauge',
          data: [
            {
            }
          ]
        }
      )
      this.update()
    }
  }
}
</script>
<style scoped>
.box {
  /*box-shadow: 0 4px 8px 0 rgba(31, 29, 29, 0.2);*/
  transition: 0.3s;
  width: 100%;
  box-shadow: 0 8px 16px 0;
}
.box:hover {
  /*box-shadow: 0 8px 16px 0;*/
}
</style>
